<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{% block title %}DSS{% endblock %}</title>
<style type="text/css"><!--
body {
  background-color: #e1ddd9;
  font-size: 13px;
  font-family: Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;  
  padding:0;
  margin:0;
}


a { 
color: #aa0000;
text-decoration: none; 
}


#header {
-moz-box-shadow: 0px 1px 10px 0px #000000;
-webkit-box-shadow: 0px 1px 10px 0px #000000;
box-shadow: 0px 1px 10px 0px #000000;
font-size: 16px;
text-transform:uppercase;
color: #564b47;
background-color: #90897a;
padding:5px 15px;
margin:0px;
width:100%;
position:fixed;
}

#header a{
color: #564b47;
}

#header a:hover{
color: white;
}

#header li{
display: inline;
}

h2 {
font-size:16px;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}

.logo { margin: 20px 0; }

p, pre {
margin: 0; 
padding: 5px 5px; 
}

#content {
	padding:10px;
}

img {max-width:100%;}

#right-box {
overflow:auto;
-moz-border-radius: 10px;
border-radius: 10px;

-moz-box-shadow: 0px 1px 10px 0px #000000;
-webkit-box-shadow: 0px 1px 10px 0px #000000;
box-shadow: 0px 1px 10px 0px #000000;
	float:right;
	margin-top:40px;
	margin-bottom:10px;
	margin-right:10px;
	width:52%;
	border: 1px solid #454545;
	background-color: #ffffff;
	padding-bottom:40px;
}

#feedback-box {
overflow:auto;
-moz-border-radius: 10px;
border-radius: 10px;

-moz-box-shadow: 0px 1px 10px 0px #000000;
-webkit-box-shadow: 0px 1px 10px 0px #000000;
box-shadow: 0px 1px 10px 0px #000000;
	float:right;
	margin-top:40px;
	margin-bottom:10px;
	margin-right:10px;
	width:52%;
	border: 1px solid #454545;
	background-color: #ffffff;
	padding-bottom:40px;
}

#title {
-moz-border-radius: 15px;
border-radius: 11px 11px 0 0;
	padding:5px;
	color:white;
	position:static;
	top:0%;
	padding-bottom:5px;
	background-color:#454545;
}

#left-box {
-moz-border-radius: 10px;
border-radius: 10px;


-moz-box-shadow: 0px 1px 10px 0px #000000;
-webkit-box-shadow: 0px 1px 10px 0px #000000;
box-shadow: 0px 1px 10px 0px #000000;
float:left;
padding: 0px;
margin-bottom: 10px;
margin-top:40px;
padding-bottom:40px;
margin-left: 10px;
width:45%;
border: 1px solid #454545;
border-top: 0px;
background-color: #ffffff;    
}

#user-info {
float:right;
margin-right:30px;
}
--></style>
</head>
  {% load markup %}
<body>

<div id="left-box">
    <div id="title">{% block boxname %}{% endblock %}</div>
	<div id="content">
            {% block content %}{% endblock %}
	</div>
    </div>
<div id="right-box">
    <div id="title">Recommendations</div>
    <div id="content">
      {% load rec %}
      {% get_rec_list %}
      
      {% for i in rec %}
          {% if i != None %}
              {% autoescape on %}{{ i|markdown }}{% endautoescape %}
          {% endif %}
      {% empty %}
      Start answering <a href="{% url index %}">questions</a> to get custom recommendations.
      {% endfor %}
	</div>
    </div>

<div id="feedback-box">
    <div id="title">Feedback</div>
        <div id="content">
            {% for f in feedback %}
              {% autoescape on %}{{ f|markdown }}{% endautoescape %}
            {% endfor %}
        </div>
    </div>
</div>

    <div id=header>
        <li><a href="{% url index %}">Home</a></li> |
        {% if request.user.is_staff %}<li><a href="{% url admin:index %}">Admin</a></li> |{% endif %}
        <li><a href="{% url profile %}">Profile</a></li> 
        {% if request.user.is_staff %} | <li>{% load count %} {% get_count %} Registered users: {{count}}</li>{% endif %}
	<div id="user-info">
	{% if user.is_authenticated %}
        Logged in as {{ user.username }} | <a href="{% url logout %}?next={% url index %}">Log out</a>
        {% else %}
            <a href="{% url login %}">Log in</a> or <a href="{% url save_progress %}">Register</a>
        {% endif %}
        </div>
    </div>

    
</body>
</html>
